<template>
<div>
  <div class="header">
     <el-row :gutter="5">
            <el-col :span="5">
                <el-select v-model="categoryString" class="m-2" placeholder="全部">
                    <el-option v-for="(item, index) in options" :key="index" :label="item" :value="item" />
                </el-select>
            </el-col>
            <el-col :span="8">
                <el-input v-model="searchString" placeholder="请输入要搜索的商品" />
            </el-col>
            <el-col :span="3">
                <el-button type="primary" @click="searchProFn">搜索</el-button>
            </el-col>
        </el-row>
  </div>
  <el-table :data="currentPageData" style="width: 100%">
    <el-table-column label="序号" >
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.$index+1}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="图片" width="130">
      <template #default="scope">
        <el-image :src='scope.row.img1'></el-image>
      </template>
    </el-table-column>
    <el-table-column label="名称" width='120'>
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.desc}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="品牌">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.brand}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="分类" :filters='filtersArr' :filter-method="filterHandler" prop='category'>
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.category}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="原价" sortable prop='originprice'>
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.originprice}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="折扣" sortable prop='discount'>
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.discount}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="销量" sortable prop='sales'>
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.sales}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="是否售卖">
      <template #default="scope">
        <el-switch
          v-model="scope.row.issale"
          class="ml-2"
          :active-value=0
          :inactive-value=1
          @click="updateFn(scope.row.proid, 'issale', scope.row.issale)"
          style="--el-switch-on-color: rgb(98, 159, 250); --el-switch-off-color: grey"
        />
      </template>
    </el-table-column>
    <el-table-column label="是否秒杀">
      <template #default="scope">
        <el-switch
          v-model="scope.row.isseckill"
          class="ml-2"
          :active-value=0
          :inactive-value=1
          @click="updateFn(scope.row.proid, 'isseckill', scope.row.isseckill)"
          style="--el-switch-on-color: rgb(98, 159, 250); --el-switch-off-color: grey"
        />
      </template>
    </el-table-column>
    <el-table-column label="是否推荐">
      <template #default="scope">
        <el-switch
          v-model="scope.row.isrecommend"
          class="ml-2"
          :active-value=0
          :inactive-value=1
          @click="updateFn(scope.row.proid, 'isrecommend', scope.row.isrecommend)"
          style="--el-switch-on-color: rgb(98, 159, 250); --el-switch-off-color: grey"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          size="small"
          type="primary"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
   <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" v-model:current-page='currentPage' :total="tableData.length" class='page' />
  </div>
</template>

<script>
// 引入请求接口(获取商品分类，修改商品选中数据,筛选商品数据)
import {getCategory,updataProdduct,seachPro} from '@/api/http.js'
   export default {
     name:'',
     data () {
       return {
         tableData:[],//全部商品信息
         currentPage:1,//页码
         limitNum:10,//每页显示的个数
         arr:[],//空数组用来缓存获取分类种类
         totalNum:0, //商品的总条数
         categoryString:'',//选中的类别信息
         searchString:'',//搜索的关键词
         options:[],//所有分类组成的数组
       };
     },

     computed:{
      //  分类
       filtersArr(){
         this.tableData.forEach(item=>{
           this.arr.push(item.category)
         })
         let newArr = Array.from(new Set(this.arr))//转为真实数组
        //  !!!!!
         return newArr.map(item=>{
           return {text:item,value:item}
         })
       },

      //  分页
      currentPageData(){
        return this.tableData.slice((this.currentPage-1)*10,this.currentPage*10)
      }
     },

     created(){
      //  01-获取所有信息
       this.getProductFn()

      //  02-获取所有商品类别
      getCategory().then(res=>{
        this.options = res.data.data
      })
     },

     methods:{
        // 01-获取商品信息
        getProductFn(){
          console.log(1111)
          console.log(this.categoryString,this.searchString)
          seachPro({ category: this.categoryString, search: this.searchString }).then(res=>{
            console.log(res)
            this.tableData = res.data.data
          })
        },
        // 02-分类筛选
        filterHandler(value, row, column){
          // console.log(value,row,column,1111)//有几条数据循环几次
          //value种类名，row该条商品的所有信息，column
          const property = column['property']
          return row[property] === value
        },
        
        // 03-更改选中信息
        updateFn(proid,type,flag){
          //调用接口
          updataProdduct({proid,type,flag}).then(res=>{
            if(res.data.code==200){
              // 更新数据列表
              this.getProductFn()
            }
          })
        },

        // 04-分页
        changepage(){
          // 更新当页商品信息
          this.getProductFn()
        },


        // 05-筛选
        searchProFn(){
          // 获取筛选出的商品信息
          this.getProductFn()
        }
      }
     }

</script>
<style scoped lang='scss'>
:deep(.el-scrollbar .cell) {
  height: 90px;
  overflow: hidden;
  line-height: 90px;
}
.el-image{
  width: 90px;
  height: 90px;
}
.page{
  margin-top: 20px;
  padding-bottom: 30px;
  float: right;
  margin-right: 20px;
}
.header{
  margin-bottom: 20px;
}
</style>